<template>
    <header id="header-top">
        <slot name="logo"></slot>
        <slot name="search"></slot>

        <section
            class="header-goback"
            v-if="isShowBack"
            @click="$router.go(-1)"
        >
            <icon name="left-arrow" size="20" />
        </section>

        <router-link
            :to="userInfo ? '/profile' : '/login'"
            v-if="isShowSignUp"
            class="head-login"
        >
            <icon name="user" v-if="userInfo" />
            <span class="login-span" v-else>登录|注册</span>
        </router-link>

        <section class="title-head ellipsis" v-if="headerTitle">
            <span class="title-text">{{ headerTitle }}</span>
        </section>

        <slot name="edit"></slot>
        <slot name="msite-title"></slot>
        <slot name="changecity"></slot>
        <slot name="changeLogin"></slot>
    </header>
</template>

<script>
export default {
    mounted() {
        // 获取用户信息
        this.$store.dispatch('user/getUserInfo');
    },
    props: {
        isShowBack: Boolean,
        isShowSignUp: Boolean,
        headerTitle: String
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo;
        }
    }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/mixin.scss';

#header-top {
    background-color: $blue;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    @include wh(100%, 1.95rem);
}

.header-goback {
    left: 0.4rem;
    @include wh(0.6rem, 1rem);
    line-height: 2.2rem;
    margin-left: 0.4rem;
}

.head-login {
    right: 0.55rem;
    @include sc(0.65rem, #fff);
    @include ct;
    .login-span {
        color: #fff;
    }

    .user-avatar {
        fill: #fff;
        @include wh(0.8rem, 0.8rem);
    }
}

.title-head {
    @include center;
    width: 50%;
    color: #fff;
    text-align: center;

    .title-text {
        @include sc(0.8rem, #fff);
        text-align: center;
        font-weight: bold;
    }
}
</style>
